<template>
    <div>
        <div class="userInfo-box">


            <!-- 顶部用户信息 -->
            <div class="user-header">
                <div class="user-header_img">
                    <sshbImage :width="400" :height="400"
                        src="https://tse2-mm.cn.bing.net/th/id/OIP-C.dr7KE3WJYaZ1rR5kM34FgQHaEK?w=245&h=180&c=7&r=0&o=5&pid=1.7"
                        style="border-radius: 50%;" preview class="userimg">
                    </sshbImage>
                </div>
                <div>
                    <div style="display: grid;justify-content: center; align-items: center; gap: 10px;">
                        <div class="userNmae">{{ userInfo.name }}</div>
                        <!-- <div class="userLine"></div> -->
                        <div class="userIntro">{{ userInfo.department }}</div>
                    </div>
                    <div style="margin-top: 10px;">
                        <span class="number">账号：{{ userInfo.account }}</span>
                        <span style="margin-left: 14px;"><img src="../../assets/images/new_img/复制2.png" alt=""
                                @click="copyAccount"></span>
                        <span v-if="isCopied" style="color: green; margin-top: 5px;"> 已复制！</span>
                    </div>

                </div>
            </div>
            <!-- 数据统计 -->
            <div class="user-stats">
                <div v-for="(stat, index) in userStats" :key="index" class="stat-item"
                    @click="handleStatistics(stat.key)">
                    <div class="stat-value">{{ stat.value }}</div>
                    <div class="stat-label">{{ stat.label }}</div>
                </div>
            </div>

            <!-- 功能菜单 -->
            <div>
                <div v-for="(item, index) in menuItems" :key="index" class="menu_item "
                    @click="handleMenuUser(item.action)">


                    <div>
                        <img :src="iconEnum[item.type]" alt="" :style="{
                            width: `${item.iconSize.width}px`,
                            height: `${item.iconSize.height}px`,
                            position: 'relative',
                            top: '4px'
                        }">
                    </div>
                    <div style="margin-left: 10px;font-size: 16px; color: var(--color-text);"> {{ item.label }}</div>



                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { watch, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { replaceLast } from '@/utils'
import logoUrl from '@/assets/images/logo.png'
import { EllipsisOutlined, SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
import sshbImage from '@/sshbComponents/sshbImage/index.vue';



import Img_1 from '../../assets/images/new_img/下载2.png'
import Img_2 from '../../assets/images/new_img/眼睛.png'
import Img_3 from '../../assets/images/new_img/设置.png'
import Img_4 from '../../assets/images/new_img/退出账号.png'




// import { loginIn } from 'api'

const router = useRouter()
const route = useRoute()
const searchText = ref('')
const showHistory = ref(false)
const searchContainer = ref(null)











// 用户头像
const showUserPanel = ref(false);
const userInfoContainer = ref(null);

// 切换面板显示状态
const toggleUserPanel = () => {
    showUserPanel.value = !showUserPanel.value;
};

// 点击外部关闭面板
const handleClickUserOutside = (event) => {
    if (userInfoContainer.value && !userInfoContainer.value.contains(event.target)) {
        showUserPanel.value = false;
    }
};

// 添加全局点击事件监听
onMounted(() => {
    document.addEventListener('click', handleClickUserOutside);
});

// 移除事件监听
onUnmounted(() => {
    document.removeEventListener('click', handleClickUserOutside);
});



// 用户信息数据
const userInfo = ref({
    name: '幸运的李李',
    department: '重庆项目 设计部 设计师',
    account: '02385643230'
});

// 统计数据
const userStats = ref([
    { label: '作品', value: 153, key: 'works', },
    { label: '获赞', value: 287, key: 'notifications', },
    { label: '消息', value: 32, key: 'notifications', },
    { label: '关注', value: 16559, key: 'following', },
    { label: '收藏', value: 569, key: 'collections', }
]);



const iconEnum = ref({
    1: Img_1,
    2: Img_2,
    3: Img_3,
    4: Img_4,

})

// 菜单项
const menuItems = ref([
    { label: '下载授权记录', action: 'download', type: 1, iconSize: { width: 24, height: 28 } },
    { label: '浏览记录', action: 'browse', type: 2, iconSize: { width: 25, height: 18 } },
    { label: '账号设置', action: 'settings', type: 3, iconSize: { width:25, height: 25 } },
    { label: '退出账号', action: 'logout', type: 4, iconSize: { width:23, height: 27 } }
])


// 用于控制是否显示"已复制"提示
const isCopied = ref(false);

// 复制操作
const copyAccount = () => {
    const account = userInfo.value.account;

    // 创建一个临时的输入框
    const tempInput = document.createElement('input');
    tempInput.value = account;
    document.body.appendChild(tempInput);

    // 选中文本并执行复制
    tempInput.select();
    document.execCommand('copy');

    // 删除临时输入框
    document.body.removeChild(tempInput);

    // 显示复制成功提示
    isCopied.value = true;

    // 3秒后隐藏提示
    setTimeout(() => {
        isCopied.value = false;
    }, 3000);
};





const handleStatistics = (key) => {
    console.log(key);

    router.push({
        path: '/IndividualCenter/' + key
    })

}



// 菜单点击处理
const handleMenuUser = (action) => {
    console.log('执行操作:', action);
    if (action === 'logout') {
        // 退出登录逻辑
        showUserPanel.value = false;
    }
};
</script>

<style lang="less" scoped>
/* 用户面板 */

.userInfo-box {
    width: 95%;
    min-height: 100vh;
    margin: 0 auto;


    .user-header {
        width: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: var(--color-text);
        margin-top: 40px;
        // justify-content: space-around;

        .user-header_img {
            // width: 40px;
            // height: 40px;
            // margin-right: 28px;


            .userimg {
                border-radius: 50%;

            }
        }

        .userNmae {
            width: auto;
            height: 20px;
            color: var(--color-text);
            font-size: 18px;
            text-align: left;
            white-space: nowrap;



        }

        .userLine {
            height: 14px;
            width: 1px;
            margin: 0px 8px;
            border: 1px solid rgb(51, 51, 51);
            align-self: flex-end;
        }

        .userIntro {
            width: auto;
            height: 14px;
            line-height: 14px;
            font-size: 16px;
            white-space: nowrap;
            align-self: flex-end;

        }

        .number {
            font-size: 16px;
            color: var(--color-text);
            margin-top: 10vw;
            margin-left: 6px;
        }




    }


    /* 统计数据 */
    .user-stats {

        display: flex;
        justify-content: space-around;
        padding: 1vw 0;
        border-bottom: 1px solid #f0f0f0;
        margin: 15px 0px;

        .stat-item {
            //   font-size: 14px;
            text-align: center;
        }

        .stat-value {
            font-weight: bold;
            font-size: 18px;
            color: var(--color-text);
        }

        .stat-label {
            font-size: 16px;
            color: var(--color-text);
            margin-top: 5px;
        }
    }

    .menu_item {
        width: 90%;
        // border: 1px solid red;
        margin: 0 auto;
        text-align: center;
        display: flex;
        align-items: center;
        padding: 10px 16px 10px 0px;
        


    }
}
</style>